<template>
  <div class="addon-detail">
    <!-- 应用基本信息 -->
    <div class="addon-header flex items-start gap-4 mb">
      <div class="addon-icon">
        <img :src="addon.icon_image" :alt="addon.title" class="w-32 h-32 rounded-lg object-cover" />
      </div>
      <div class="addon-info flex-1">
        <div class="flex items-center mb-2">
          <h2 class="text-2xl font-bold">
            {{ addon.title }}
          </h2>
          <div>
            <span class="text-sm text-gray-500 mr-2 ml2">版本: {{ addon.version }}</span>
            <span class="text-sm text-gray-500 mr-2">浏览量: {{ addon.visit }}</span>
            <span class="text-sm text-gray-500 mr-2">下载: {{ addon.down_count || 0 }}</span>
          </div>
        </div>
        <p class="text-gray-600 mb-2 min-h-40px">{{ addon.description }}</p>
        <div class="flex items-center">
          <span class="text-lg font-semibold text-red-500 mr-10">￥{{ addon.price }}</span>

          <el-button v-if="type == 2" round type="danger" class="w-100px" @click="onBuy">去购买</el-button>
          <el-button v-if="type == 1" type="primary" round class="w-100px" @click="onBuy">去安装</el-button>
        </div>
      </div>
    </div>
    <!-- 详细介绍 -->
    <div v-if="addon.detail_content" class="addon-content mb-6">
      <h3 class="text-lg font-semibold mb-3">详细介绍</h3>
      <div class="content-wrapper border rounded-lg p-4 bg-white">
        <div class="prose max-w-none" v-html="addon.detail_content"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineOptions } from 'vue'

defineOptions({
  name: 'DkAddonDetail'
})

defineProps({
  addon: {
    type: Object,
    required: true
  },
  type: {
    type: Number,
    default: 0
  }
})

const imagePreviewVisible = ref(false)
const previewImageUrl = ref('')

const previewImage = (imageUrl) => {
  previewImageUrl.value = imageUrl
  imagePreviewVisible.value = true
}

const formatDate = (timestamp) => {
  if (!timestamp) return '-'
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN')
}
</script>

<style scoped>
.addon-detail {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-item {
  text-align: center;
}

.meta-item {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.content-wrapper :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 0;
  display: block;
}

.content-wrapper :deep(p) {
  margin-bottom: 12px;
  line-height: 1.6;
}

.content-wrapper :deep(h1),
.content-wrapper :deep(h2),
.content-wrapper :deep(h3),
.content-wrapper :deep(h4) {
  margin: 16px 0 8px 0;
  font-weight: 600;
}

.content-wrapper :deep(section) {
  margin-bottom: 12px;
}

.prose {
  color: #374151;
  line-height: 1.7;
}

.prose :deep(a) {
  color: #3b82f6;
  text-decoration: none;
}

.prose :deep(a:hover) {
  text-decoration: underline;
}
</style>
